<template>
  <div class="echatrs-c" />
</template>

<script>
//这就是刚才那组件
  import echarts from 'echarts'
  require('echarts/theme/macarons')   //重要！！！每次重新拉取项目需要替换此地址的文件为  @/uiils/macarons.js
  import { debounce } from '@/utils'
  export default {
    props: {
      autoResize: {
        type: Boolean,
        default: true
      },
      data: {  // 这里接受的参数就是刚才的 item.data配置
        type: Object
      }
    },
    data() {
      return {
        chart: echarts
      }
    },
    mounted() {
      this.setOptions(this.data)  // canshu
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }
      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName('pageNav')[0]
      this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }
      this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
      this.chart.dispose()
      this.chart = null

    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler()
        }
      },
      setOptions(data = {}) {  ///es6
        this.chart = echarts.init(this.$el, 'macarons') // 修改默认主题
        data.color =  ["#f48112",   // 修改默认主题色
          "#c03b0d",
          "#36ab2b",
          "#0a6b91",
          "#fb1d1a",
          "#33cb86",
          "#974b22",
          "#efd642",
          "#84a34b",
          "#39b1b0",
          "#1d4aaf",]
        this.chart.setOption(data)
      }
    }
  }
</script>
<style lang="scss">
  .echatrs-c{
    height: 100%;
    &>div{
      width: 100%!important;
      canvas{
        width: 100%!important;
      }
    }
  }
</style>
